Vida Zhang's profile

Udemy UX Redesign

Udemy - A UX Redesign by Vida Zhang

You can view a clickable prototype in Lumin PDF here
or download a clickable pdf here
or download a Balsamiq bmpr here
Problems
 
I've been an avid Udemy user for a long time-- it has a lot of great courses on UI and UX design that I enjoy learning. In order to keep learning on the go, I downloaded the Udemy app on my phone. However, the mobile learning experience wasn't as smooth as I hoped it would be. I had trouble effectively browsing courses, managing downloads, and watching videos while walking. I decided to redesign Udemy to provide the users a better, smoother mobile learning experience. 
Research
 
I conducted a qualitative research to see if other users are experiencing the same frustrations as I did. Below are some sample user reviews on Udemy in the Google Play Store:
From these sample reviews and more, I found out that there's obviously a need for more personalization and a better off-screen/audio learning experience. Here's a more detailed analysis. On the left is a list of the issues I found from user research. On the right, I identified the major areas for improvement after combining those issues.
Personas
 
I summarized Udemy users into the following two personas, Brian and Anna. The primary persona Brian is a college student who's always looking to learn new things; the secondary persona Anna is a young professional who is focused on learning new skills to change her career.
Solutions
 
After analyzing the problems that I discovered in the research process, I came up with the following solutions to make Udemy better meet Brian and Anna's needs:
 
Create a personal space to view and track the user's courses
 
Users like Brian like to "collect" courses on Udemy- it makes them feel like they are conquering courses one by one. They want to see their progress because it enrouges them to learn. Therefore, I decided to make the "My Course" screen more personalized. Users will be able to see their profile picture, which makes it more personalized. They will also see the number of courses they learned, in progress, favorites and courses in wishlist. These numbers are like rewards to their hard work. The higher the numbers are, the more accomplished they will feel.
 
Make the download process more precise and manageable
 
Currently it's almost scary to download videos in Udemy. Due to the lack of signifier, feedback, and error prevention, users don't know how many lectures will be downloaded, how to stop downloading once it starts, or how to delete downloads. This creates a huge problem for heavy phone users like Brian and Anna who want convenient access to Udemy on the go but are afraid that the downloads will occupy too much space on their phone. In the redesign, I made the download function more manageable -- users can now choose which lectures to download or delete by tapping on checkboxes. An error warning message will also pop up when they're about to delete downloaded contents for error prevention purposes.
 
Add audio only option
 
Busy users lilke Anna want to learn even when they're walking/driving to work or doing chores. In those cases they are not be able to look at the screen, and that's when an audio only option is in need. Adding the audio only option makes mobile learning much easier -- it saves data and saves space (if downloaded). For many courses, just listening to audio is sufficient anyways. 
 
Other improvements
 
Video watching experience is improved. There's nothing on the screen but the video when watching a lecture. Tap the screen once and all the action options will appear. 
 
Added notes taking funciton. Users can take notes while watching the video and can review the notes later. 
 
Categories visualized and layered. Instead of the long scrolling dropdown menu to see about 15 different categories, I moved the categories into a separate page to make it easier to navigate. I also added an image for each category as a background, which is more visually intuitive and appealing. 
 
Added sort function. Users can easily sort courses based on popularity, price and name in a dropdown menu. 
User Flow
 
I mapped out the screens and actions that users can go through in the redesigned app, incorporating all the features I listed above in the solutions. 
Sketches

Using my user flow, I sketched out the screens and interactions in the app. I used my sketches as a way to quickly test and validate my ideas, while making comments and recording emerging ideas.
 
The sketches also show how my ideas evolved. For example, in the sketch, I originally had a folder option in My Courses for more personalization. However, based on Hick's Law, this complicates the user experience and has the danger of offering the users too many options. Therefore I changed it to a sorting dropdown, which serves the same function -- categorizing courses, but much more easier to use by giving the users only a limited number of choices. 
 
For a more detailed look, please click here
Wireframes
Take a more detailed look at the wireframes here 
Prototypes
 
View a clickable prototype online in Lumin PDF here
Download a clickable pdf here
Download a Balsamiq bmpr here
Udemy UX Redesign
Published:

Udemy UX Redesign

A UX redesign for the Udemy app, focused on personalization and download management.

Published: